<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css">
  <link rel="stylesheet" href="../static/fourm/css/demo1.css">
  <link rel="stylesheet" href="../static/bootstrap.min.css">

  <script src="../static/jquery.min.js"></script>
  <script src="../static/bootstrap.min.js"></script>
</head>

<body>
  <ul class="breadcrumb">
    <li>系统操作管理</li>
    <li class="active">操作日志管理</li>
  </ul>


  <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>


  <script src="../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../layuiadmin/' //静态资源所在路径
    }).extend({
      index: '/lib/index' //主入口模块
    }).use(['index', 'table'], function () {
      var table = layui.table,
        admin = layui.admin;

      table.render({
        elem: '#test-table-operate',
        url: "/MS/getloginfo",
        page:{				//分页设置
          limit:10,		//默认每一页显示数量
          limits:[5,10,20,30,40,50]
        },
        cols: [
          [{
            type: 'checkbox',
            fixed: 'left'
          },{
            field: 'username',
            width: 170,
            title: '账号',
            sort: true,
            fixed: 'left'
          }, {
            field: 'rolo',
            width: 200,
            title: '身份'
          }, {
            field: 'time',
            width: 230,
            title: '操作时间',
            sort: true
          }, {
            field: 'result',
            width: 230,
            title: '操作结果'
          }, {
            field: 'event',
            width: 230,
            title: '事件'
          }]
        ],
        page: true
      });

      //监听表格复选框选择
      table.on('checkbox(test-table-operate)', function (obj) {
        console.log(obj)
      });
      //监听工具条
      table.on('tool(test-table-operate)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
          layer.msg('ID：' + data.id + ' 的查看操作');
        } else if (obj.event === 'del') {
          layer.confirm('真的删除行么', function (index) {
            obj.del();
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          layer.alert('编辑行：<br>' + JSON.stringify(data))
        }
      });

      var $ = layui.$,
        active = {
          getCheckData: function () { //获取选中数据
            var checkStatus = table.checkStatus('test-table-operate'),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          },
          getCheckLength: function () { //获取选中数目
            var checkStatus = table.checkStatus('test-table-operate'),
              data = checkStatus.data;
            layer.msg('选中了：' + data.length + ' 个');
          },
          isAll: function () { //验证是否全选
            var checkStatus = table.checkStatus('test-table-operate');
            layer.msg(checkStatus.isAll ? '全选' : '未全选')
          }
        };

      $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    });

  </script>
</body>

</html>